<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			#d1{
				width: 6.25rem;
				height: 6.25rem;
				background-color: #000000;
			}
		</style>
	</head>
	<body>
		<input type="radio" name="color" value="1" />红色
		<input type="radio" name="color" value="2" />黄色
		<input type="radio" name="color" value="3" />绿色
		<div id="d1">
			
		</div>
		<script type="text/javascript">
			//点击不同颜色，改变div的背景色
			$(function(){
				
				$("input[name='color']").change(function(){
					console.log($(this).val());
					let val=parseInt($(this).val());
					if (val===1) {
						$("#d1").css("background-color","red");//改变div的背景色
					}else if(val===2){
						$("#d1").css("background-color","yellow");//改变div的背景色
					}
					 else{
						$("#d1").css("background-color","green");//改变div的背景色
					}
					
				})
			})
		</script>
	</body>
</html>
